<template>
	<view class="itu-mp-tips" :style="computedStyle" v-if="isShow">
		<!-- #ifdef MP-WEIXIN -->
		<view class="itu-mp-tips__arrow" :style="{ marginRight:  `${marginRight}px`, marginTop:  `${marginTop}px` }"></view>
		<view class="itu-mp-tips__content" :style="[{borderRadius, padding, color: textColor}]">
			<slot></slot>
			<template v-if="!$slots.default">
				<view class="itu-mp-tips__content-text">{{ text }}</view>
				<view class="itu-mp-tips__content-line" v-if="showLine"></view>
				<view class="itu-mp-tips__content-btn" @click="close">
					<icon v-if="!$slots.icon" type="clear" :color="textColor" :size="rpx2px(28)" />
					<slot name="icon"></slot>
				</view>
			</template>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import { rpx2px } from '../../libs/utils/common.js'
	import { setCache, getCache } from '../../libs/utils/cache.js'
	export default {
		name: "itu-mp-tips",
		props: {
			text: {
				type: String,
				default: '添加到我的小程序'
			},
			//是否开启了自定义头部
			isCustom: {
				type: Boolean,
				default: false
			},
			showLine: {
				type: Boolean,
				default: true,
			},
			textColor: {
				type: String,
				default: "#FFF"
			},
			bgColor: {
				type: String,
				default: "rgba(0,0,0,.8)"
			},
			borderRadius: {
				type: String,
				default: "10rpx"
			},
			padding: {
				type: String,
				default: "0 30rpx"
			},
			// 用户关闭后隐藏时间，默认7天
			expire: {
				type: Number,
				default: 7
			}
		},
		data() {
			return {
				isShow: false,
				marginRight: 66,
				marginTop: 0
			};
		},
		computed:{
			computedStyle(){
				let style = [
					`--t-mp-tip-color: ${this.textColor}`,
					`--t-mp-tip-bg-color: ${this.bgColor}`,
					``
				];
				return style.join(";")
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.initTips();
			// #endif
			// #ifndef MP-WEIXIN
			console.warn("右上角引导组件仅支持微信小程序")
			// #endif
		},
		methods: {
			rpx2px,
			initTips() {
				const _isHide = getCache('isMptipHide');
				if (_isHide) return
				// 处理根据系统信息处理位移箭头位置
				let systemInfo = uni.getWindowInfo();
				let client = uni.getMenuButtonBoundingClientRect();
				if (systemInfo && client) {
					this.marginRight = systemInfo.screenWidth - client.left - 28;
					if (this.isCustom) {
						this.marginTop = client.bottom + client.top - systemInfo.statusBarHeight;
					}
				}
				this.isShow = true
			},
			close() {
				this.isShow = false
				setCache('isMptipHide', true, 60 * 60 * 24)
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itu-mp-tips {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10073;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		flex-direction: column;

		&__arrow {
			width: 0;
			height: 0;
			margin-right: 120rpx;
			border-width: 10rpx;
			border-style: solid;
			border-color: transparent transparent var(--t-mp-tip-bg-color) transparent;
		}

		&__content {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 70rpx;
			margin-right: 30rpx;
			min-width: 300rpx;
			background-color: var(--t-mp-tip-bg-color);

			&-text {
				font-size: 26rpx;
				font-weight: 400;
			}

			&-line {
				padding: 0 25rpx;
				height: 100%;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: 2rpx;
					height: 30rpx;
					background: var(--t-mp-tip-color);
				}
			}

			&-btn {
				display: flex;
				justify-content: center;
			}
		}
	}
</style>